<template>
  <BaseMainSlot>
    <template v-slot:content>
      <div class="farm-main">
        <div class="tr-sid">
          <div class="sid-head">摄像头列表</div>
          <div class="sid-tree">
            <div
              v-for="item in cameralist"
              :key="item.cameraId"
              :class="cameraId === item.cameraId ? 'camera-item beselect' : 'camera-item'"
              @click="getcamerme(item)"
            >
              <i class="el-icon-video-camera"></i>
              {{ item.cameraName }}
            </div>
          </div>
        </div>
        <div id="video_container" class="cameraview-box">
          <!-- 预热加载动画 -->
          <div v-if="startUp === 'true' && cricleAdd" class="cricle">
            <countDown :start-time="startTime" :step="-1" />
            <p>预热加载中,请耐心等待</p>
          </div>
          <!-- <iframe
            v-if="showFace === 'play'"
            :src="nowcameraurl"
            style="width: 100%; height: 100%"
          ></iframe> -->
          <div v-if="showFace === 'play'" style="width: 100%; height: 100%">
            <div id="video-container" style="width: 100%; height: 100%"></div>
          </div>
          <div
            v-if="showFace === 'notCameraList'"
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <h1>暂无摄像头</h1>
          </div>
          <div
            v-if="showFace === 'downFlow'"
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <h1>萤石云流量不足，功能受限</h1>
          </div>
          <div
            v-if="showFace === 'transCamera'"
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          ></div>
          <div
            v-if="showFace === 'notCameraData'"
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <h1>未取得该摄像头数据</h1>
          </div>
          <div
            v-if="showFace === 'timeout'"
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <h1>静置超时，请刷新重新启动</h1>
          </div>
          <div id="full_screen" class="allScream">
            <svg-icon
              :icon-class=" showscreen ? 'enter-full-screen' : 'exit-full-screen'"
            />
          </div>
        </div>
        <div class="cameralist-box">
          <zhcameralist
            :camera-id="cameraId"
            :cameralistparam="paramslist"
            @nowcameraurl="getcamerurl"
            @getUploadTime="handleLoading"
          />
        </div>
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
import zhcameralist from "./component/cameralist.vue";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import countDown from "@/components/count-down/index";
import screenfull from "screenfull";
import nowpagereq from "@/api/processing-management/camera-manage/index";
import EZUIKit from 'ezuikit-js';
var player = null

export default {
  name: "VideoSurveillance",
  components: { BaseMainSlot, zhcameralist, countDown },
  data() {
    return {
      camera: {},
      cameraId: "",
      cameralist: [], // 摄像头列表
      startTime: 60,
      cricleAdd: false,
      startUp: "false",
      showscreen: true,
      loading: true,
      // 表格选中id
      tableselectidlist: "",
      // 当前选中地块组名或地亏啊名
      facilityName: "",
      // 当前选中cameraindex
      nowcameraindex: "",
      addcameraVisible: false,
      paramslist: {},
      // 当前视频播放地址
      nowcameraurl: "",
      // 是否展示视频窗口
      showFace: "transCamera",
      timer: null
    };
  },
  watch: {},
  mounted() {
    this.getCameraList();
    const element = document.getElementById("video_container");
    document.getElementById("full_screen").addEventListener("click", () => {
      if (screenfull.isFullscreen) {
        this.showscreen = true;
        screenfull.toggle();
      } else {
        if (screenfull.isEnabled) {
          screenfull.request(element); // 元素全屏
          this.showscreen = false;
        }
      }
    });
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    this.timer = null;
    player?.stop();
  },
  deactivated() {
    clearTimeout(this.timer);
    this.timer = null;
    player.stop();
  },
  methods: {
    getCameraList() {
      nowpagereq.getCameraList().then(res => {
        if (res.code === 1) {
          this.cameralist = res.data;
          this.cameraId = res.data[0].cameraId;
        }
      });
    },
    getcamerurl(e, method = undefined) {
      // 不存在地址 不展示摄像头
      // console.log(e)
      player?.stop();
      if (document.getElementById('video-container-wrap')) {
        let e = document.getElementById("video-container-wrap");
        e.style.display = "none";
      }
      if (e === "transCamera") {
        // 切换摄像头
        this.showFace = "transCamera";
        this.loading = false;
        this.cricleAdd = false;
        clearTimeout(this.timer);
        return;
      } else if (e === "downFlow") {
        // 流量不足无法播放
        this.showFace = "downFlow";
        this.loading = false;
        return;
      } else if (e === "notCameraData") {
        // 未获取到该摄像头数据
        this.showFace = "notCameraData";
        this.loading = false;
        return;
      } else if (e === "notCameraList") {
        // 暂无摄像头
        this.showFace = "notCameraList";
        this.loading = false;
        return;
      } else if (e === "timeout") {
        this.showFace = "timeout";
        this.loading = false;
        return;
      }
      this.nowcameraurl = e;
      setTimeout(() => {
        this.showFace = "play";
        // console.log(e, method)
        if (player) {
          player.stop();
        }
        if (method !== undefined) {
          player = new EZUIKit.EZUIKitPlayer({ audio: 1, enableSharedArrayBufferGuide: true, width: 1980,
            height: 1080, template: 'security', ...method })
          // player.reSize('100%', '100%');
          player.stop().then(() => {
            player.play();
          });
        }
      }, 200);
    },
    getcamerme(item) {
      this.cameraId = item.cameraId;
    },
    // 点击相机，获取相机数据，拼接完整video路径
    clickcamerames(e) {
      let nowcamerid = e.cameraid;
      console.log(nowcamerid);
    },
    // 参数1：时长 参数2：是否预热
    handleLoading(durTime, startUp) {
      this.timer = null;
      this.startUp = startUp;
      this.startTime = 60;
      this.cricleAdd = true;
      this.timer = setTimeout(() => {
        this.cricleAdd = false;
      }, durTime * 60000 + 200);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-select .el-input__inner {
  color: #272929 !important;
}
::v-deep {
  .zhcontent {
    overflow: hidden !important;
  }
}
.main {
  width: 100%;
  height: 100%;
}
.farm-main {
  width: 100%;
  height: calc(100%);
  // height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .tr-sid {
    width: calc(20% - 15px);
    margin-left: 10px;
    margin-right: 5px;
    height: 100%;
    padding: 0 10px 10px;
    background-color: #074052;
    .sid-head {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      text-align: center;
      border-bottom: #fff dashed 1px;
    }
    .sid-tree {
      width: 100%;
      height: calc(100% - 40px);
      margin-top: 10px;
      overflow: auto;
      .camera-item {
        cursor: pointer;
        width: 100%;
        font-weight: 700;
        font-size: 18px;
        line-height: 40px;
        color: #fff;
        // border-radius: 5px;
        text-align: center;
        border: 1px solid #fff;
        border-top: unset;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:nth-child(1) {
          border-top: 1px solid #fff;
        }
        &:hover {
          background-color: #37d2d5;
        }
      }
      .beselect {
        background-color: #37d2d5;
        // background-image: linear-gradient(160deg, #062f8b 0%, #3de0ce 100%);
      }
    }
  }
  .cameraview-box {
    width: calc(60% - 10px);
    height: 100%;
    border: 8px double #fff;
    background-color: #363839;
    position: relative;
    .cricle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .allScream {
      position: absolute;
      font-size: 24px;
      right: 10px;
      bottom: 10px;
    }
  }
  .cameralist-box {
    width: calc(20% - 20px);
    height: 100%;
  }
}::v-deep {
  #video-container-wrap {
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100% !important;
      height: 100% !important;
      #video-container-headControl {
        display: none !important;
      }
    #video-container {
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100% !important;
      height: 100% !important;
    .video-containerparent-wnd {
      > div {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
      }
    }
    #video-containercanvas0 {
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100% !important;
      height: 100% !important;
    }
  }
  }
}
</style>
